import 'package:flutter/material.dart';
import 'package:xv_flutter/model/product.dart';
import 'package:xv_flutter/router/application.dart';
import 'package:xv_flutter/style/color.dart';
import 'package:xv_flutter/style/font.dart';
import 'package:xv_flutter/utils/http.dart';

class ProductPage extends StatefulWidget {
  @override
  _ProductPageState createState() => _ProductPageState();
}

class _ProductPageState extends State<ProductPage> {
  List<Items> list;
  int page = 0;

  @override
  void initState() {
    _getproduct();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ProductList(list, getNetPage: () => _getproduct());
  }

  // 获取产品列表
  _getproduct() async {
    var fromData = {
      "page": page++,
    };
    await request('homePageProducts', formData: fromData).then((resp) {
      HomePageModel homePage = HomePageModel.fromJson(resp);
      setState(() {
        list = homePage.data.items;
      });
      // print(homePage.toJson());
    }).catchError((e) {
      print("Error ===> $e");
    });
  }
}

// 产品列表
class ProductList extends StatelessWidget {
  final List<Items> list;
  final VoidCallback getNetPage; // 获取下一页
  ProductList(this.list, {this.getNetPage});

  @override
  Widget build(BuildContext context) {
    return list != null
        ? ListViewData(list, getNetPage: getNetPage)
        : Center(child: CircularProgressIndicator());
  }
}

// 构建列表页数据
class ListViewData extends StatelessWidget {
  final List<Items> list;
  final VoidCallback getNetPage; // 获取下一页
  ListViewData(this.list, {this.getNetPage});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        padding: EdgeInsets.symmetric(horizontal: 10),
        // 列表项
        itemCount: list.length,
        // 列表项构建
        itemBuilder: (BuildContext context, int i) {
          Items item = list[i];
          // 加载下一页
          if ((i + 10) == list.length) {
            print("$i ====>  ${list.length}");
            getNetPage();
          }

          return InkWell(
            onTap: () {
              Application.router.navigateTo(context, "/detail?id=12");
            },
            child: Container(
              color: productBgColor,
              padding: EdgeInsets.only(top: 5, right: 5),
              child: Row(
                children: <Widget>[
                  // 产品图片
                  Image.asset(item.imageUrl, width: 120, height: 120),
                  SizedBox(width: 10),
                  Expanded(
                    child: Container(
                      decoration: BoxDecoration(
                          border: Border(
                              bottom: BorderSide(
                                  width: 1, color: productLineColor))),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(item.desc,
                              maxLines: 2, overflow: TextOverflow.ellipsis),
                          Row(
                            children: <Widget>[
                              SizedBox(width: 5),
                              Text(item.type,
                                  style: TextStyle(
                                      fontSize: 16, color: productTypeColor)),
                              item.point == null
                                  ? SizedBox()
                                  : Container(
                                      child: Text(
                                        item.point,
                                        style:
                                            TextStyle(color: productPointColor),
                                      ),
                                      padding:
                                          EdgeInsets.symmetric(horizontal: 3),
                                      margin: EdgeInsets.only(left: 4),
                                      decoration: BoxDecoration(
                                          border: Border.all(
                                              width: 1,
                                              color: productPointColor)),
                                    )
                            ],
                          ),
                          Text(
                            item.name,
                            style: productTextFont,
                          )
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        });
  }
}
